<template>
	<div class="container-fluid">
		<div class="panel">
			<div class="panel-body text-center">
				<el-form :model="company" :rules="rules" ref="companyForm">
					<el-form-item>
						<el-upload class="avatar-uploader" name="logo" action="/api/company/1/modifylogo" :headers="headers" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
							<img v-if="company.logo" :src="company.logo" height="120px" width="120px">
							<i v-else class="el-icon-plus avatar-uploader-icon"></i>
							<div class="el-upload__tip" slot="tip">只能上传jpg/png文件，120X120。且不超过500kb</div>
						</el-upload>
					</el-form-item>
					<el-row :gutter="20">
						<el-col :span="8" :offset="8">
							<div class="grid-content bg-purple">
								<el-form-item label="公司名称" prop="name">
									<el-input v-model="company.name" placeholder="请输入公司名称"></el-input>
								</el-form-item>
								<el-form-item label="公司地址" prop="address">
									<el-input v-model="company.address" placeholder="请输入公司地址"></el-input>
								</el-form-item>
								<el-form-item label="公司电话">
									<el-input v-model="company.telephone" placeholder="请输入公司座机电话"></el-input>
								</el-form-item>
								<el-form-item label="联系人">
									<el-input v-model="company.contacts" placeholder="请输入联系人姓名"></el-input>
								</el-form-item>
								<el-form-item v-if="company.contacts" label="移动电话">
									<el-input v-model="company.mobile" placeholder="请输入联系人的移动电话"></el-input>
								</el-form-item>
							</div>
						</el-col>
					</el-row>
				</el-form>
			</div>
			<div class="panel-footer text-center">
				<el-button type="primary" plain @click="submit('companyForm')">保存修改</el-button>
			</div>
		</div>
	</div>
</template>

<script>
	import api from '../apis'
	import store from '../store'
	import defaultLogo from '../assets/images/default_logo.png'

	export default {
		name: "company",
		data () {
			return {
				logo: defaultLogo,
				company: {
					id: null,
					name: '',
					address: '',
					contacts: '',
					telephone: '',
					mobile: ''
				},
				headers: {
					Authorization: 'Bearer ' + store.state.account.access_token
				},
				rules: {
					name: [
						{ required: true, message: '请输入公司名称', trigger: 'blur' },
					],
					address: [
						{ required: true, message: '请输入公司地址', trigger: 'blur' },
					]
				},
			}
		},
		methods: {
			/**
			 * Logo 上传成功后出发事件
			 * @param response
			 */
			handleAvatarSuccess (response) {
				this.company.logo = response.path;
				this.$message.success('Logo 修改成功');
			},
			beforeAvatarUpload () {

			},
			/**
			 * 提交表单
			 * @param name
			 */
			submit (name) {
				this.$refs[name].validate((valid) => {
					if (valid) {
						api.company.update(1, this.company).then(response => {
							this.company = response.data;
							this.$message.success('更新成功');
						})
					} else {
						return false;
					}
				});
			}
		},
		mounted () {
			/**
			 * 获取企业信息
			 */
			api.company.fetch().then(response => {
				this.company = response.data;
			});
		}
	}
</script>

<style>
	input[type="file"] {
		display: none;
	}
	.avatar-uploader .el-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}
	.avatar-uploader .el-upload:hover {
		border-color: #409EFF;
	}
	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 178px;
		height: 178px;
		line-height: 178px;
		text-align: center;
	}
	.avatar {
		width: 178px;
		height: 178px;
		display: block;
	}
	.el-form-item__label{
		width:100px;
	}
	.el-input{
		width:80%;
	}
</style>
